<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-title">
        <i class="el-icon-s-platform"></i>
        <span>系统登录</span>
      </div>
      <el-form :model="form" :rules="loginRules" ref="loginForm" class="login-form">
        <el-form-item prop="userName" class="el-user">
          <el-input 
            v-model="form.userName" 
            prefix-icon="el-icon-user"
            placeholder="请输入用户名">
          </el-input>
        </el-form-item>
        
        <el-form-item prop="passWord" class="el-password">
          <el-input 
            v-model="form.passWord" 
            prefix-icon="el-icon-lock"
            type="password"
            placeholder="请输入密码"
            @keyup.enter.native="handleLogin">
          </el-input>
        </el-form-item>
        
        <el-form-item class="verify-code" prop="code">
          <div class="code-input-wrapper">
            <el-input 
              v-model="form.code"
              prefix-icon="el-icon-key"
              placeholder="请输入验证码"
              @keyup.enter.native="handleLogin">
            </el-input>
          </div>
          <div class="code-img-wrapper">
            <img 
              :src="codeUrl" 
              @click="getCode" 
              class="code-img"
              alt="点击刷新验证码"
            />
          </div>
        </el-form-item>

        <el-form-item class="login-btn">
          <div class="btn-group">
            <el-button 
              type="primary" 
              :loading="loading"
              @click="handleLogin"
              class="submit-btn">
              <i class="el-icon-right"></i>
              登录
            </el-button>
            <el-button 
              type="danger" 
              @click="handleApply"
              class="apply-btn">
              投递简历
            </el-button>
          </div>
        </el-form-item>

        <!-- <el-form-item class="register-btn">
          <el-button 
            type="text" 
            @click="handleRegist">
            <i class="el-icon-plus"></i>
            注册账号
          </el-button>
        </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui';
export default {
  name: 'Login',
  data(){
    return {
      loading: false,
      codeUrl: '',
      form:{
        userName: '',
        passWord: '',
        code: '',
        userKey: ''
      },
      loginRules:{
        userName: [
          { required: true, message: '请输入账户', trigger: 'blur' },
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: 'blur'}
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
      console.log('Component is created');
    },
  mounted () {
    console.log('Component is mounted');
    this.getCode();
  },

  methods:{

    handleLogin(){
      this.$refs.loginForm.validate().then(()=>{
        this.loading = true;
        let pwd = this.form.passWord;
        let rsaPwd = this.$rsa.encrypt(pwd);
      
        console.log(rsaPwd);
        const formData = {
          username:this.form.userName,
          password:rsaPwd,
        }
        console.log(JSON.stringify(formData));
        

        this.$axios.post('/security/sysUsr/login', JSON.stringify(formData), {
          headers: {
            'Content-Type' : "application/json"
          },
          params:{
            'code': this.form.code,
            'userKey':this.form.userKey
          }
        }).then(res => {
          this.loading = false;
          console.log(res);
          if (res.result == 200) {
            console.log('登录成功:', res.data);
            Message.success({message : "登录成功！"})

            window.sessionStorage.setItem('token', res.data)
            // 获取用户信息
            this.getUserInfo()
          }else{ Message.error({message : res.message})
          }
        }).catch(error => {
          this.loading = false;
          console.error('登录失败:', error);
          Message.error({message : error.message})
        });
      }).catch((error=>{
        this.$message({
          message: '输入错误！',
          type: 'warning'
        });
      }))
    },

    handleRegist() {
      this.$router.push('/register')
    },
    
    // 获取用户信息方法
    getUserInfo() {
      this.$axios.get('/security/sysUsr/accountUser').then(res => {
        if (res.result == 200) {
          const userData = res.data
          // 提取权限信息
          const authority = userData.authorities && userData.authorities.length > 0 
            ? userData.authorities[0].authority 
            : null
            
          // 保存用户信息到sessionStorage
          window.sessionStorage.setItem('userInfo', JSON.stringify(userData))
          window.sessionStorage.setItem('authority', authority)

          // 登录成功后跳转到首页
          this.$router.replace('/home')
        } else {
          Message.error({message: "获取用户信息失败！"})
        }
      }).catch(error => {
        console.error('获取用户信息失败:', error)
        Message.error({message: "获取用户信息失败！"})
      })
    },
    
    getCode() { //点击的时候就图片请求 图片就换了
      this.$axios.get('/security/sysUsr/captcha', {
        }).then(res => {
          console.log(res);
          this.form.userKey = res.data.userKey;
          // 获取 Base64 编码的图像数据
          const base64Image = res.data.captcherImg;
          console.log(base64Image);
          this.codeUrl = base64Image;

        }).catch(error => {
          console.error('获取验证码失败:', error);
          });
    },

    handleApply() {
      this.$router.push('/no-layout/position-list')
    }
  }
}
</script>

<style scoped>
/* 重置全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.login-container {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.login-box {
  width: 400px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  animation: slideIn 0.5s ease-out;
}

.login-title {
  text-align: center;
  margin-bottom: 30px;
  color: #409EFF;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-title i {
  font-size: 28px;
  margin-right: 10px;
}

.login-form {
  margin-top: 30px;
}

.el-user {
  margin-bottom: 30px;
}

.el-password{
  margin-bottom: 30px;

}

.verify-code {
  display: flex;

  align-items: center;
  margin-bottom: 30px;
  height: 40px;
  width: 100%;
}

.code-input-wrapper {
  float: left;
  width: 200px;
  height: 40px;

}

.code-img-wrapper {
  margin-left: 220px;
  width: 100px;
  height: 40px;
}

.code-img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
}

.btn-group {
  display: flex;
  gap: 10px;
}

.submit-btn {
  flex: 7;
  height: 40px;
  font-size: 16px;
  letter-spacing: 2px;
  transition: all 0.3s;
}

.apply-btn {
  flex: 3;
  height: 40px;
  font-size: 16px;
  letter-spacing: 2px;
  transition: all 0.3s;
}

.submit-btn:hover, .apply-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.register-btn {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 0 !important;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:deep(.el-input__inner) {
  height: 40px;
  line-height: 40px;
}

:deep(.el-form-item) {
  margin-bottom: 25px;
}

:deep(.el-form-item:last-child) {
  margin-bottom: 0;
}

:deep(.el-button--text) {
  font-size: 14px;
}

:deep(.el-input__prefix) {
  left: 10px;
}

:deep(.el-input__inner) {
  padding-left: 35px;
}


</style>

